<template>
	<view class="safe-area-inset-bottom">
		<view style="height: 90%;">
		<view class="sign_header">
			<p>尊敬的励橙您好！</p>
			<p style="margin:10px 0 0;">
				<span style="font-weight: 700;margin-left: 25px;margin-right: 3px;">北京如易企服科技有限公司</span>
				给您发送了一份电子合同，请您尽快签署！
			</p>
		</view>
		<!-- 签署文件 -->
		<view class="sign_header">
			<view class="title" style="margin: 0 0 5px;">签署文件：文档已加密
				<i class="iconfont" style="font-size: 13px;color:#00a660">&#xe615;</i>
			</view>
			<view class="sign_file">
				<i class="iconfont" style="font-size: 16px;color: rgb(250, 78, 78);">&#xe6b6;</i>北京记忆王销售采购合同
			</view>
		</view>
		<!-- 签署时间 -->
		<view class="sign_header">
			<view class="title">合同发起时间：2022-06-26 23:59:59</view>
			<view class="time">签署截止时间：2022-06-08 23:59:59</view>
		</view>
		<!-- 发起方 -->
			<view class="sign_web">
			<view class="title"> <view class="section"></view> 发起方（企业）</view>
			<view class="marleft">北京如易企服科技有限公司
				<i class="iconfont iconPeo" style="font-size: 15px;">&#xe681;</i>
			</view>
			<view class="marleft">经办人：励橙
				<i class="iconfont iconPeo">&#xe625;</i>12345678910
			</view>
			<!-- 接收方 企业-->
			<view class="title" style="margin-top: 15px;"> <view class="section"></view>接收方（企业）</view>
			<view class="marleft">北京如易企服科技有限公司
				<i class="iconfont iconPeo" style="font-size: 15px;">&#xe681;</i>
			</view>
			<view class="marleft">经办人：励橙
				<i class="iconfont iconPeo">&#xe625;</i>12345678910
			</view>
			<!-- 接收方 个人-->
			<view class="title" style="margin-top: 15px;"> <view class="section"></view>接收方（个人）</view>
			<view class="marleft">励橙
				<i class="iconfont iconPeo">&#xe625;</i>12345678910
			</view>
		</view>
		<!-- 抄送人-->
		<view class="sign_header">
			<view class="title">抄送人</view>
			<view class="">文件签署后，将抄送给1个用户 <span class="look_span" @click="copyView">点击查看</span> </view>
		</view>
		</view>
		<!-- 立即签署 -->
		<view class="sign_bottom">
			<view class="sign_counter">
				<uni-countdown :font-size="12" :day="1" :hour="2" :minute="30" :second="0" color="#FFFFFF" background-color="orange" />
				<span style="margin-left: 10px;color: #333333;">截止签约</span>
			</view>
			<button class="loginBtn" @click="sign">
				<span style="border: 1px solid #fff;padding: 5px 60px;border-radius: 5px;">立即签署</span>
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			// 立即签署
         sign(){
			 uni.navigateTo({
			 	url:'/pages/signWeb/loginWeb'
			 })
		 },
		 copyView(){
			 uni.navigateTo({
			 	url:'/pages/signWeb/copyView'
			 })
		 },
		}
	}
</script>

<style lang="scss" scoped>
	page {
		/* background: #fff; */
		font-size: 16px;
	}
	.marleft{
		margin-left: 15px;
	}
	.section{
		height: 8px;
		content: '';
		width: 8px;
		margin-bottom: 2px;
		border-radius: 50%;
		background: #00a660;
		display: inline-block;
		margin-right: 5px;
	}
	.iconPeo{
		color:#00a660;
		padding: 0 3px;
		font-size: 14px;
	}
	.sign_counter{
		display: flex;
		font-size: 14px;
		background: #fff9ea;
		color: orange;
		align-items: center;
		justify-content: center;
		height: 30px;
	}
    .sign_bottom{
		width: 100%;
	}
	.loginBtn {
		background-color: #00a660;
		color: #fff;
		width: 100%;
		height: 45px;
		border-radius: 0;
		align-items: center;
	}
	.sign_header {
		padding: 15px 15px;
		margin: 10px 10px;
		background: #fff;
		border-radius: 5px;
	}

	.look_span {
		float: right;
		color: #00a660;
	}

	.sign_web {
		padding: 15px 15px;
		margin: 10px 10px 0 10px;
		background: #fff;
		border-radius: 5px;
	}

	.title {
		margin: 0 0 3px;
	}

	.sign_file {
		display: inline-block;
		margin-left: 30px;
	}
</style>
